<template>
    <!-- <h1>i m user</h1> -->
    <div class="manage">

        <!-- 新增弹窗 -->
        <el-dialog
        title="新增书籍"
        :visible.sync="dialogVisible" 
        :before-close="handleClose"
        width="50%">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px" :inline="true" >
            <el-form-item label="ISBN" prop="isbn">
                <el-input placeholder="请输入ISBN(谨慎修改)" v-model="form.isbn"></el-input>
            </el-form-item>

            <el-form-item label="书名" prop="name">
                <el-input placeholder="请输入书名" v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="作者" prop="author">
                <el-input placeholder="请输入作者" v-model="form.author"></el-input>
            </el-form-item>


            <el-form-item label="校区" prop="spot">
                <el-select v-model="form.spot" placeholder="请选择校区">
                    <el-option label="本部校区" value="本部校区"></el-option>
                    <el-option label="沙河校区" value="沙河校区"></el-option>
                    <el-option label="宏福校区" value="宏福校区"></el-option>                  
                </el-select>
            </el-form-item>

            <el-form-item label="数量" prop="number">
                <el-input placeholder="请输入数量" v-model="form.number"></el-input>
            </el-form-item>

            <!-- <el-form-item label="所属学院" prop="college">
                <el-input placeholder="请输入学院" v-model="form.college"></el-input>
            </el-form-item> -->
            <el-form-item label="所属学院" prop="college">
                <el-select v-model="form.college" placeholder="请选择学院">
                    <el-option label="信息与通信工程学院" value="信息与通信工程学院"></el-option>
                    <el-option label="电子工程学院" value="电子工程学院"></el-option>
                    <el-option label="计算机学院（国家示范性软件学院）" value="计算机学院（国家示范性软件学院）"></el-option>
                    <el-option label="网络空间安全学院" value="网络空间安全学院"></el-option>
                    <el-option label="人工智能学院" value="人工智能学院"></el-option>
                    <el-option label="现代邮政学院（自动化学院）" value="现代邮政学院（自动化学院）"></el-option>
                    <el-option label="集成电路学院" value="集成电路学院"></el-option>
                    <el-option label="经济管理学院" value="经济管理学院"></el-option>
                    <el-option label="人文学院" value="人文学院"></el-option>
                    <el-option label="国际学院" value="国际学院"></el-option>
                    <el-option label="马克思主义学院" value="马克思主义学院"></el-option>
                    <el-option label="网络教育学院（继续教育学院）" value="网络教育学院（继续教育学院）"></el-option>
                    <el-option label="理学院" value="理学院"></el-option>
                    <el-option label="数字媒体与设计艺术学院" value="数字媒体与设计艺术学院"></el-option>
                    <el-option label="应急管理学院" value="应急管理学院"></el-option>
                    <el-option label="体育部" value="体育部"></el-option>
                    <el-option label="所有学院" value="所有学院"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="适用专业" prop="major">
                <el-input placeholder="请输入专业" v-model="form.major"></el-input>
            </el-form-item>

            <el-form-item label="出版社" prop="publisher">
                <el-input placeholder="请输入出版社" v-model="form.publisher"></el-input>
            </el-form-item>
            
        </el-form>
            
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
        </el-dialog>

        <!-- +新增按钮 -->
        <!-- <div class="manage-header">
            <el-button @click="handleAdd" type="primary">
                + 新增
            </el-button>
        </div> -->

        <div  class="common-table">
            <el-table
            height="90%"
            :data="booksInfo"
            stripe
            :row-style="{height: '100px'}"
            style="width: 100%">
                <el-table-column
                    prop="_id"
                    label="书本ID">
                </el-table-column>
                <el-table-column
                    prop="isbn"
                    label="ISBN">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="书名">
                </el-table-column>
                <el-table-column
                    prop="author"
                    label="作者">
                </el-table-column>
                <el-table-column
                    prop="spot"
                    label="校区">
                </el-table-column>
                <el-table-column
                    prop="number"
                    label="数量">
                </el-table-column>
                <el-table-column
                    prop="college"
                    label="所属学院">
                </el-table-column>
                <el-table-column
                    prop="major"
                    label="适用专业">
                </el-table-column>
                <el-table-column
                    prop="operation"
                    label="操作">
                    <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pager">
                <el-pagination
                    layout="prev, pager, next"
                    :total="this.total"
                    @current-change="handlePage">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

export default{
    name:'Mail',
    data(){
        return{
            dialogVisible:false,
            total:0,
            pageData:{
                pageSize: 10,
                currentPage : 1
            },
            booksInfo:[],
            db:'',
            dialogtitle:"新增公告",
            tempObj:'',
            form:{
                isbn:'',
                name:'',
                author:'',
                spot:'',
                number:'',
                college:'',
                major:'',
                publisher:''
            },
            empty_form:{
                isbn:'',
                name:'',
                author:'',
                spot:'',
                number:'',
                college:'',
                major:'',
                publisher:''
            },
            count : 1,
            dialogVisible:false,
            dialogtitle:"新增书籍",
            modaltype:0,//0新增，1编辑，标记弹窗状态
            rules:{
                isbn:[
                    {required:true , message:'请输入ISBN'}
                ],
                name:[
                    {required:true , message:'请输入书名'}
                ],     
                author:[
                    {required:true , message:'请输入作者'}
                ],    
                spot:[
                    {required:true , message:'请选择校区'}
                ],
                number:[
                    {required:true , message:'请输入数量'}
                ],
                college:[
                    {required:true , message:'请输入学院'}
                ],    
                major:[
                    {required:true , message:'请输入专业'}
                ],
                publisher:[
                    {required:true , message:'请输入出版社'}
                ]

            },
        //     tableData:[  {
        //         ISBN: '9787040345414',
        //         book_name: '高等数学（上）',
        //         location: '西土城校区',
        //         quantity: 35,
        //         major: '理学院'
        //     },
        //     {
        //         ISBN: '9787040345414',
        //         book_name: '高等数学（上）',
        //         location: '沙河校区',
        //         quantity: 25,
        //         major: '理学院'
        //     },
        //     {
        //         ISBN: '9787040345421',
        //         book_name: '高等数学（下）',
        //         location: '沙河校区',
        //         quantity: 27,
        //         major: '理学院'
        //     },
        //     {
        //         ISBN: '9787302443253',
        //         book_name: '数据结构与算法',
        //         location: '西土城校区',
        //         quantity: 30,
        //         major: '计算机学院'
        //     },
        //     {
        //         ISBN: '9787115428028',
        //         book_name: '计算机网络',
        //         location: '沙河校区',
        //         quantity: 18,
        //         major: '计算机学院'
        //     },
        //     {
        //         ISBN: '9787111353563',
        //         book_name: '操作系统',
        //         location: '西土城校区',
        //         quantity: 44,
        //         major: '计算机学院'
        //     },
        //     {
        //         ISBN: '9787121361869',
        //         book_name: '网络安全',
        //         location: '西土城校区',
        //         quantity: 24,
        //         major: '网络安全学院'
        //     },
        //     {
        //         ISBN: '9787121253263',
        //         book_name: '数字信号',
        //         location: '沙河校区',
        //         quantity: 11,
        //         major: '信息与通信工程学院'
        //     },
        //     {
        //         ISBN: '9787111579617',
        //         book_name: '宏观经济学',
        //         location: '沙河校区',
        //         quantity: 5,
        //         major: '经济管理学院'
        //     },
        
        // ],
        //     modaltype:0//0新增，1编辑，标记弹窗状态
        }
    },
    methods:{
        initdb(){
            let that = this
            var c1 = new that.$cloud.Cloud({
                 //必填，表示是未登录模式
                identityless: true,
                //资源方 AppID
                resourceAppid: 'wx3a07f3c2fa333336',
                //资源方环境 ID
                resourceEnv: 'ayaka557-2gh3t7jm380b9701',
            })
            c1.init()
            console.log('c1',c1);
            //获取云数据库信息
            this.db = c1.database();
            console.log('db',this.db)
        },
        getWxBooks(){
            //封装一下分页查询
            this.getBooksData(this.pageData.pageSize,this.pageData.currentPage)
        },
        getBooksData(pageSize,currentPage){
            // 分页查询数据
            this.db.collection('goods').skip(pageSize*(currentPage - 1)).limit(pageSize).get()
                .then(res => {
                    this.booksInfo = res.data
                    console.log('books', this.booksInfo)
                    this.db.collection('goods').count()
                        .then(res => {
                            console.log('total',res);
                            this.total = res.total
                        })
                        .catch(err => {
                            console.log('err',err);
                            
                        })
                    console.log('count',this.total);
                    
                })
                .catch(err => {
                    console.log(err);
                });
        },
        handleAdd(){
            //显示调用去掉bug
            // this.handleClose()
            //修改弹窗状态
            this.modaltype = 0//新增
            this.dialogtitle = "新增书籍"
            //显示弹窗
            this.dialogVisible = true
        },
        handleClose(){
            this.$refs.form.resetFields()
            console.log("关闭弹窗，reset success")
            console.log("关闭后表单",this.form)
            this.dialogVisible = false
        },
        handleEdit(row){
            console.log("当前准备进行修改的行数据",row)
            //先修改弹窗的模式与标题，再显示弹窗
            this.modaltype = 1
            this.dialogtitle = " 修改书籍信息"
            this.dialogVisible = true

            //不能直接赋值，不然直接修改了数据，需要点击确认才能修改
            //利用obj存储row中冗余的id项以及其余可能项，并传入obj的row进行修改
            //不使用this.obj =  row是因为这样两个变量会指向同一块地址，实际上是同一个变量的两个引用
            //回显
            this.tempObj = JSON.parse(JSON.stringify(row));
            this.form = {
                isbn:this.tempObj.isbn,
                name:this.tempObj.name,
                author:this.tempObj.author,
                spot:this.tempObj.spot,
                number:this.tempObj.number,
                college:this.tempObj.college,
                major:this.tempObj.major,
                publisher:this.tempObj.publisher
            }
        },
        handleDelete(row){
            console.log("deleteRow",row)
            this.$confirm('此操作将永久删除该类书籍（所有）, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {//用户点击了确认按钮
                // console.log('我要删除');
                this.db.collection('goods').doc(row._id).remove()
                .then(() => {
                    console.log('Book deleted successfully');

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                        });
                    // 更新通知列表
                    this.getWxBooks();
                })
                .catch(err => {
                    console.error('Error deleting book: ', err)
                    this.$message({
                        type: 'info',
                        message: '未知原因删除失败'
                    });       
                });

            }).catch(() => {//用户点击了取消按钮
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        submit(){
            this.$refs.form.validate((valid) => {
                //如果数据不完整，valid为false
                if(valid){
                    console.log(this.form);
                    //this.form是data,this.$refs.form是真正的表单
                    if(this.modaltype === 0){
                    //不准添加
                    //    //对后端发送增加请求......
                    //     this.add_time_form.name = this.form.name
                    //     this.add_time_form.detail = this.form.detail
                    //     this.add_time_form.time = new Date()
                    //     console.log('addForm',this.add_time_form)
                    //     this.db.collection('notices').add({data:this.add_time_form})  
                    //         .then(() => {
                    //             console.log('Notice added successfully');
                    //             // 更新通知列表
                    //             this.getWxNotices()
                    //         })
                    //         .catch(err => {
                    //             console.error('Error adding notice: ', err);
                    //         });
                         
                    }else{//修改
                        //对后端修改增加请求......
                        console.log('Updateform',this.form)

                        this.db.collection('goods').doc(this.tempObj._id).update({data:this.form})
                            .then(() => {
                                console.log('Book deleted successfully');
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                    });
                                // 更新通知列表
                                this.getWxBooks();
                            })
                            .catch(err => {
                                console.error('Error deleting book: ', err)
                                this.$message({
                                    type: 'info',
                                    message: '未知原因修改失败'
                                });       
                            });
                    }
                    this.handleClose()
                }
                else{
                    //do nothing
                }
            })
        },
        cancel(){
            this.handleClose()
        },
        handlePage(currentPage){
            //当点击分页栏的时候，传入页面号
            console.log(currentPage)
            this.pageData.currentPage = currentPage
            this.getWxBooks()
        }
    },





    //     submit(){
    //         this.$refs.form.validate((valid) => {
    //             //如果数据不完整，valid为false
    //             if(valid){
    //                 console.log(this.form);
    //                 //this.from是data,this.$refs.form是真正的表单
    //                 if(this.modaltype === 0){
    //                    //对后端发送增加请求......
    //                     addUser(this.form).then(()=>{
    //                     //重新调用获取数据接口
    //                     this.fetchData()
    //                    })

    //                 }else{//修改
    //                     //对后端修改增加请求......
    //                     //此处未完成
    //                     updateUser(this.form).then(() =>{
    //                         this.fetchData()
    //                     })
    //                 }


    //                 this.handleClose()
    //             }
    //             else{

    //             }
    //         })
    //     },
    //     handleClose(){
    //         this.$refs.form.resetFields()
    //         this.dialogVisible = false
    //     },
    //     cancel(){
    //         this.handleClose()
    //     },
    //     handleEdit(row){
    //         this.modaltype = 1
    //         this.dialogVisible = true

    //         //不能直接赋值，不然直接修改了数据，需要点击确认才能修改
    //         this.form = JSON.parse(JSON.stringify(row))

    //         console.log(row)
    //     },
    //     handleDelete(row){
    //         this.$confirm('此操作将永久删除该书籍, 是否继续?', '提示', {
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //         }).then(() => {
    //             //此处未完成
    //             deleteUser(row).then(()=>{
    //                 this.$message({
    //                 type: 'success',
    //                 message: '删除成功!'
    //                 });
    //                 //重新获取数据
    //                 this.fetchData()
    //             })
    //         }).catch(() => {
    //             this.$message({
    //                 type: 'info',
    //                 message: '已取消删除'
    //             });          
    //         });
    //     },
    //     handleAdd(){
    //         this.modaltype = 0
    //         this.dialogVisible = true
    //     },
    //     fetchData() {
    //         getUser().then(({ data }) => {
    //         this.tableData = data; // 更新表格数据
    //         console.log("fetchData",this.tableData)
    //     })
    //     }
    // },    
    mounted(){
        this.initdb()
        this.getWxBooks()

        // getUser().then(({data})=>{//解构赋值到函数参数
        //     // console.log(data)
        // //     const {tableData} = data.data
        // //     // console.log(tableData)
        // // //表格
        //     this.tableData = data//动态数据替换
        //     // console.log(data)
        // }
        // )
    }
}
</script>

<!-- <style lang="less">
.manage{
    height: 90%;
}
</style> -->
<style lang="less">
.manage{
    height: 100%;
    .common-table{
        position: relative;
        height: calc(100% - 62px);
        .pager{
        position: absolute;
        bottom: 0;
        right: 20px;
        }
    }
}
</style>